HTML5 microdata – verso il web semantico

Microdata - HTML5

Vorrei esordire nel 2011 con un post riguardante il mondo del web semantico del quale già ho trattato qualche tempo fa. Il 2011 sarà l’anno in cui assisteremo, secondo la mia opinione, alla diffusione su larga scala dell’HTML5 per muoverci verso il Web semantico con l’introduzione di metadati. Chiaramente saremmo degli illusi se pensassimo che in dicembre 2011 tutti noi programmatori staremo utilizzando tecniche di assegnazione dei metadati; credo, tuttavia, che ci sarà un fermento positivo, soprattutto tra le grandi organizzazioni, per le modalità di sviluppo web.

Cosa sono i microdata?

Può tornare utile, in alcune situazioni, specificare all’interno di una pagina web alcune informazioni leggibili da sistemi software esterni (come ad esempio un motore di ricerca) in modo da poter identificare oltre all’informazione vera e propria anche una chiave. Poter gestire “la chiave” è l’opportunità che ci viene data per definire il tipo di informazione.

Potendo offrire ad un sistema automatizzato come il browser, ma non solo, una serie di informazioni contrassegnate per tipologia abbiamo la possibilità di definire la nostra pagina web in modo più fruibile da vari sistemi.
Pensiamo ad un paio esempi:

  • contrassegnare le tue informazioni di contatto in modo che un browser possa automaticamente proporre al visitatore di inserirle nella propria rubrica;
  • contrassegnare le informazioni di un evento (data, luogo, nome) in modo che un browser possa offrire al visitatore di salvarlo nella propria agenda.

I microdata sono, dunque, una feature che HTML5 ci offre per poter definire sematicamente le informazioni.

In pratica…

Per poter specificare un set di informazioni è necessario sfruttare un vocabolario che equivale ad una lista che definisce le proprietà da utilizzare. In particolare nei prossimi esempi utilizzeremo il data-vocabulary definito da Google; è utile sapere, però, che ogni sviluppatore può definire un vocabolario per ogni evenienza così da poter specificare tutte le informazioni desiderate.

Di seguito un esempio per visualizzare come definire le infomazioni di una azienda o in generale di un’organizzazione:

[html]
<section itemtype="http://www.data-vocabulary.org/Organization/" itemscope>
<h5 itemprop="name">Artera S.r.l.</h5>
<a href="http://www.artera.it" itemprop="url">www.artera.it</a>
<section itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">Via Regina Margherita, 6</span>
<span itemprop="locality">Lurate Caccivio</span> (<span itemprop="region">CO</span>)
<span itemprop="postal-code">22075</span>
<span itemprop="country-name">Italy</span>
</section>
<span itemprop="tel">+39 031391500</span>
</section>
[/html]

Le proprietà necessarie sono:

  • itemtype: attributo utilizzato per definire il tipo di informazione della quale stiamo specificando il contenuto;
  • itemscope: attributo necessario per definire l’elemento HTML come item e che quindi conterrà le varie informazioni in elementi figli;
  • itemprop: attributo utilizzato per identificare l’informazione definita.

Il contenuto identificato con il nome specificato come itemprop è per quasi tutti i tag HTML il contenuto dello stesso. Esistono, però, alcune eccezioni:

  • i tag <a>, <area>, <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source>, <video>
    L’informazione viene identificata non con il con contenuto, ma con l’attributo principale del tag, ad esempio: href (per il tag a), src (per il tag img), ecc…
  • il tag <time>
    L’informazione è contenuta nell’attributo datetime.
  • il tag <meta>
    Il contenuto è proprio l’attributo content del tag.

In definitiva i Microdata sono un ottimo strumento per strutturare semanticamente le proprie informazioni sul web. Essi costituiscono inoltre uno strumento che i motori di ricerca utilizzano per migliorare l’indicizzazione dei siti internet e per aiutare nelle ricerche gli utenti.
A livello di sviluppo web posso consigliare di incominciare ad utilizzare i Microdata nelle proprie pagine web così da poterne considerare le potenzialità e le migliorie che essi apportano.

Condividi